<template>
  <view class="content">
    <view
      class="modal-item shadow"
      v-for="(item, index) in list"
      :key="index"
      @click="toPage(item.path)"
    >
      <view class="icon">
        <view
          class="icon-bg"
          :style="{
            'background-image': 'url(' + item.url + ')',
          }"
        >
        </view>
      </view>
      <view class="label">{{ item.label }}</view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    list: Array,
  },
  methods: {
    toPage(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: pxToRpx(10);
  padding: pxToRpx(16);
  box-sizing: content-box;
  .modal-item {
    display: flex;
    min-width: pxToRpx(160);
    padding: pxToRpx(30) pxToRpx(4);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: pxToRpx(10);
    flex: 1 0 0;
    background: #fff;
    border-radius: 10rpx;
    .icon {
      display: flex;
      width: pxToRpx(80);
      height: pxToRpx(80);
      justify-content: center;
      align-items: center;
      background-color: #f6f7fb;
      border-radius: 50%;
      padding: 20rpx;
      box-sizing: border-box;
      .icon-bg {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 90% 90%;
        // border-radius: 50%;
      }
    }
  }
}
</style>
